{% extends 'base.html' %}
{% block head %}

 
	<link href="{{ path }}js/plugins/datatables/DT_bootstrap.css" rel="stylesheet">
	<link href="{{ path }}js/plugins/responsive-tables/responsive-tables.css" rel="stylesheet"> 
    
  <script src="{{ path }}js/demos/demo.tables.js"></script>
  <script src="{{ path }}js/plugins/datatables/jquery.dataTables.js"></script>
  <script src="{{ path }}js/plugins/datatables/DT_bootstrap.js"></script>
	<script src="{{ path }}js/plugins/responsive-tables/responsive-tables.js"></script>
    
  <script src="{{ path }}js/plugins/msgGrowl/js/msgGrowl.js"></script>
	<script src="{{ path }}js/plugins/msgAlert/js/msgAlert.js"></script>
  <script src="{{ path }}js/plugins/timepicker/jquery.ui.timepicker.min.js"></script>
  <script src="{{ path }}js/plugins/colorpicker/js/bootstrap-colorpicker.js"></script>
  <script src="{{ path }}js/plugins/lightbox/jquery.lightbox.js"></script>
  <script src="{{ path }}js/demos/demo.ui-elements.js"></script>
    
  <link href="{{ path }}js/plugins/smartwizard/smart_wizard.modified.css" rel="stylesheet"> 
	<script src="{{ path }}js/plugins/smartwizard/jquery.smartWizard-2.0.modified.js"></script>
	<script src="{{ path }}js/demos/demo.wizard.js"></script>
  <script src="{{ path }}js/jquery.numeric.js"></script>

  <script src="{{ path }}js/JavaScriptUtil.js"></script>
  <script src="{{ path }}js/InputMask.js"></script>
  <script src="{{ path }}js/Parsers.js"></script>

{% endblock %}
{% block jquery %}	
   
   
   $("#recibo-consecutivo").numeric();
	$("#total").numeric();
    $("#concepto-valor").numeric();
    
	$( '#frm_recibo' ).submit(function() {
    	consecutivo = $('#factura-no').attr('value');
        estudiante = $('#estudiante-id').attr('value');
    	fecha = $('#fecha').attr('value');
        
		if(consecutivo != 0 && estudiante != 0 && fecha != 0){
			return true;
		}
		else{
			 alert("Diligencie todos los campos obligatorios.")
				 return false;
		}
    });
        
{% endblock %}


{% block javascript %}

    var total_recibo = 0;
    
    function elegirEstudiante(estudiante_id, identificacion, nombre){
		$("#estudiante-id").val(estudiante_id);
		$("#estudiante-identificacion").val(identificacion);
		$("#estudiante-nombre").val(nombre);
		$('#myEstudiante').modal('hide');
	}
	
	function elegirConcepto(concepto_id, concepto_codigo, concepto_nombre){
		$("#concepto-id").val(concepto_id);
		$("#concepto-codigo").val(concepto_codigo);
		$("#concepto-nombre").val(concepto_nombre);
		$('#myConcepto').modal('hide');
	}

	function agregarFila(obj){
      if($("#concepto-id").val() != ""){
        	$("#cant_campos").val(parseInt($("#cant_campos").val()) + 1);
      		var oId = $("#cant_campos").val();
			var concepto = $("#concepto-nombre").val();
			var concepto_codigo = $("#concepto-codigo").val();
			var concepto_id = $("#concepto-id").val();
			var concepto_observacion = $("#concepto-observacion").val();
			var concepto_valor = $("#concepto-valor").val();
      		
			concepto_valor = concepto_valor.replace(".", "");
			concepto_valor = concepto_valor.replace(",", ".");
			concepto_valor = parseFloat(concepto_valor);

			if(isNaN(concepto_valor)) { concepto_valor = 0; }
          
            var strHtml1 = '<input type="hidden" id="hdnItem_' + oId + '" name="hdnItem_' + oId + '" value="0"/>' + "<td>" + concepto_codigo + '<input type="hidden" id="hdnConceptoCodigo_' + oId + '" name="hdnConceptoCodigo_' + oId + '" value="' + concepto_id + '"/></td>';
          	var strHtml2 = "<td>" + concepto + '<input type="hidden" id="hdnConcepto_' + oId + '" name="hdnConcepto_' + oId + '" value="' + concepto + '"/></td>' ;
          	var strHtml3 = "<td>" + concepto_valor + '<input type="hidden" id="hdnValor_' + oId + '" name="hdnValor_' + oId + '" value="' + concepto_valor + '"/></td>' ;
			var strHtml4 = "<td>" + concepto_observacion + '<input type="hidden" id="hdnObs_' + oId + '" name="hdnObs_' + oId + '" value="' + concepto_observacion + '"/></td>' ;
             var strHtml5 = '<td><img src="{{ path }}images/delete.png" width="16" height="16" alt="Eliminar" onclick="if(confirm(\'¿Realmente desea eliminar el concepto?\')){eliminarFila(' + oId + ');}"/>';
              strHtml5 += '<input type="hidden" id="hdnIdCampos_' + oId +'" name="hdnIdCampos[]" value="' + oId + '" /></td>';
              var strHtmlTr = "<tr id='rowConcepto_" + oId + "'></tr>";
              var strHtmlFinal = strHtml1 + strHtml2 + strHtml3 + strHtml4 + strHtml5;
              $("#tbConceptos").append(strHtmlTr);
              //si se agrega el HTML de una sola vez se debe comentar la linea siguiente.
              $("#rowConcepto_" + oId).html(strHtmlFinal);
				
			var total_recibo = $("#total").val();
      		
			total_recibo = total_recibo.replace(".", "");
			total_recibo = total_recibo.replace(",", ".");
			total_recibo = parseFloat(total_recibo);
			
              total_recibo = total_recibo + concepto_valor;
              $("#total").val(total_recibo);
			  
              $('#concepto-codigo').attr('value', '');
              $('#concepto-nombre').attr('value', '');
              $('#concepto-valor').attr('value', '');
			  $('#concepto-observacion').attr('value', '');
              return false;
		}
		else{
          alert("No es un concepto válido.");
		}
	}
    
	function eliminarFila(oId){
            value = $("#hdnItem_" + oId).val();
            valor = parseInt($("#hdnValor_" + oId).val());
            
			var total_recibo = $("#total").val();
      		
			total_recibo = total_recibo.replace(".", "");
			total_recibo = total_recibo.replace(",", ".");
			total_recibo = parseFloat(total_recibo);
			
            $.ajax({
              url: "/contabilidad/recibo-caja/borrarItem/",
              type: "POST",
              data : {item:value, 
                       },
              dataType: "html",
              success: function(datos) {
                if (datos==1 || datos==2){
					total_recibo = total_recibo - valor;
					$("#total").val(total_recibo);
			      
					$("#rowConcepto_" + oId).remove();
                }
                else{
                  alert(datos);
                }
              }
          });
         
	    
		return false;
	}

	function cancelar(){
	    $("#tbConceptos").html("");	
		return false;
	}
{% endblock %}

{% block contenido %}
<div class="span12">
	      		
        <div class="widget">
                
            <div class="widget-header">
                <h3>
                    <i class="icon-magic"></i>
                    Recibo de caja
                </h3>
            </div> <!-- /widget-header -->
            
            <div class="widget-content">
                                
                <form id="frm_recibo" action="/contabilidad/recibo-caja/guardar/" method="POST" class="form-horizontal">
					{% csrf_token %}
                    <div id="wizard" class="swMain">
                        
                        <ul class="wizard-steps">
                            <li>
                                <a href="#step-1" class="">
                                    <div class="wizard-step-number">1</div>
                                    <div class="wizard-step-label">Detalles de Recibo</div>
                                    <div class="wizard-step-bar"></div>
                                </a>		
                            </li>
                            <li>
                                <a href="#step-2" class="">
                                    <div class="wizard-step-number">2</div>
                                    <div class="wizard-step-label">Conceptos de Recibo</div>
                                    <div class="wizard-step-bar"></div>
                                </a>
                            </li>
                        </ul>
    
                        <div id="step-1">	  				
                            
                            <h3>Detalles de Recibo:</h3>

                            <br />
                            
                            <div class="row-fluid">
                                
                                <div class="span11">
									
									<input type="hidden" id="recibo-id" name="recibo-id" value="{{ Recibo.id }}">
									
                                      <div class="control-group">
                                          <label class="control-label" for="bizname">Estudiante:</label>
                                          <div class="controls">
                                            <input type="text" class="input-large" id="estudiante-nombre" name="estudiante-nombre" value="{{ Recibo.estudiante.nombre1 }} {{ Recibo.estudiante.nombre2 }} {{ Recibo.estudiante.apellido1 }} {{ Recibo.estudiante.apellido2 }}" readonly>
											<a  href="#myEstudiante" id="btn-nuevoE" data-toggle="modal"><img src="{{ path }}images/24x24/search.png" /></a>
											<input type="hidden" id="estudiante-id" name="estudiante-id" value="{{ Recibo.estudiante.id }}">
                                          </div>
                                      </div>
									  
									  <div class="control-group">
                                        <label class="control-label" for="bizname">Identificacion:</label>
                                        <div class="controls">
                                          <input type="text" class="input-large" id="estudiante-identificacion" name="estudiante-identificacion" required="required" value="{{ Recibo.estudiante.identificacion }}" readonly>
                                        </div>
                                      </div>
                                      
									  <div class="control-group">
                                        <label class="control-label" for="bizaddress1">Fecha:</label>
                                        <div class="controls">
										<input type="text" class="input-large" id="fecha" name="fecha" required="required" value="{{ Recibo.fecha|date:'d/m/Y' }}">
                                        </div>
                                      </div>
									  
                                      <div class="control-group">
                                        <label class="control-label" for="bizname">Ciudad:</label>
                                        <div class="controls">
                                          <input type="text" class="input-large" id="Recibo-ciudad" name="Recibo-ciudad" required="required" value="{{ Recibo.ciudad }}">
                                        </div>
                                      </div>
                                      
                                      <div class="control-group">
                                        <label class="control-label" for="bizname">Consecutivo:</label>
                                        <div class="controls">
                                          <input type="number" class="input-large" id="recibo-consecutivo" name="recibo-consecutivo" value="{{ Recibo.consecutivo }}" min="0">
                                        </div>
                                      </div>
									  
									  <div class="control-group">
                                        <label class="control-label" for="bizname">Concepto:</label>
                                        <div class="controls">
											<textarea class="input-large" rows id="recibo-concepto" name="recibo-concepto">{{ Recibo.concepto }}</textarea>
                                        </div>
                                      </div>
                                      
                                      <div class="control-group">
                                        <label class="control-label" for="bizname">Total:</label>
                                        <div class="controls">
                                          <input type="text" class="input-medium" id="total" name="total" required="required" readonly onkeyup="calculaIva();" value="{{ Recibo.debito }}">
                                        </div>
                                      </div>
                                    
                                </div> <!-- /span11 -->
                                
                                
                            </div> <!-- /row-fluid -->
                                                    
                        </div> <!-- /step -->
    
    
    
                        <div id="step-2">
                            
                            <h3>Ítems de Recibo:</h3>
                            
                            <br />
                            <div class="row-fluid">
							
                                <div class="span6">
								
                            		<input type="hidden" id="cant_campos" name="cant_campos" value="{{ ReciboConceptos|length }}" />
                                    <div class="control-group">
                                          <label class="control-label" for="bizname">Concepto:</label>
                                          <div class="controls">
                                            <input type="text" class="input-large" id="concepto-nombre" name="concepto-nombre" value="{{ Recibo.concepto.nombre }}" readonly>
											<a  href="#myConcepto" id="btn-nuevoC" data-toggle="modal"><img src="{{ path }}images/24x24/search.png" /></a>
											<input type="hidden" id="concepto-id" name="concepto-id" value="{{ Recibo.concepto.id }}">
                                          </div>
                                      </div>

                                      <div class="control-group">
                                        <label class="control-label" for="bizname">Código:</label>
                                        <div class="controls">
                                          <input type="text" class="input-large" id="concepto-codigo" name="concepto-codigo" required="required" value="{{ Recibo.concepto.codigo }}" readonly>
                                        </div>
                                      </div>
                                      
									  <div class="control-group">
										<label class="control-label" for="bizname">Valor:</label>
                                        <div class="controls">
                                          <input type="text" class="input-medium" id="concepto-valor" name="concepto-valor">
                                        </div>
                                      </div>
                                      
                                      <div class="control-group">
                                        <label class="control-label" for="bizname">Observacion:</label>
                                        <div class="controls">
											<textarea class="input-large" rows id="concepto-observacion" name="concepto-observacion"></textarea>
                                        </div>
                                      </div>

                                         <button type="button" id="btn_agregar" class="btn btn-primary btn-medium" onclick="agregarFila(document.getElementById('cant_campos'));">Agregar concepto</button>
                                
                                </div> <!-- /span6 -->
                                
                                <div class="span6 offset1">
								
                                    <table class="table table-bordered table-striped table-highlight" id="tbConceptos">
                                        <thead>
                                        <tr>
                                            <th width="5%" align="center">Codigo</th>
                                            <th width="40%" align="center">Nombre</th>
                                            <th width="10%" align="center">Valor</th>
                                            <th width="40%" align="center">Observacion</th>
                                            <th width="5%" align="center">Accion</th>
                                        </tr>
                                        </thead>
                                        
                                        <tbody>
                                        {% for item in ReciboConceptos %}
                                            <tr id="rowConcepto_{{ forloop.counter }}">
                                                <input type="hidden" id="hdnItem_{{ forloop.counter }}" name="hdnItem_{{ forloop.counter }}" value="{{ item.id }}"/>
                                                <td align="left"><label>{{ item.concepto.codigo }}</label>
                                                  <input type="hidden" id="hdnConceptoCodigo_{{ forloop.counter }}" name="hdnConceptoCodigo_{{ forloop.counter }}" value="{{ item.concepto.id }}"/></td>
												<td align="left"><label>{{ item.concepto.nombre }}</label>
                                                  <input type="hidden" id="hdnConcepto_{{ forloop.counter }}" name="hdnConcepto_{{ forloop.counter }}" value="{{ item.concepto.nombre }}"/>
                                                </td>
                                                <td align="left"><label>{{ item.valor }}</label>
                                                  <input type="hidden" id="hdnValor_{{ forloop.counter }}" name="hdnValor_{{ forloop.counter }}" value="{{ item.valor }}"/></td>
												<td align="left"><label>{{ item.observacion }}</label>
                                                  <input type="hidden" id="hdnObs_{{ forloop.counter }}" name="hdnObs_{{ forloop.counter }}" value="{{ item.observacion }}"/></td>
                                                <td><img src="{{ path }}images/delete.png" width="16" height="16" alt="Eliminar" onclick="if(confirm('¿Realmente desea eliminar el concepto?')){eliminarFila({{ forloop.counter }});}"/>
                                                <input type="hidden" id="hdnIdCampos_{{ forloop.counter }}" name="hdnIdCampos[]" value="{{ forloop.counter }}" /></td>
                                            </tr>
                                        {% endfor %}
                                        </tbody>
                                        
                                    </table>
								
                                </div> <!-- /span6 -->
                                
                                
                            </div> <!-- /row-fluid -->
                            
                                
                        </div> <!-- /step -->   
    
    
                </div> <!-- /wizard -->
                                    
                </form> 
                
                            
            </div> <!-- /widget-content -->
                
        </div> <!-- /widget -->
        
</div> <!-- /.span12 -->



<div class="modal fade hide" id="myConcepto">
	<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal">&times;</button>
			<h3>Conceptos</h3>
	</div>
	<div class="widget widget-table">   
		<div class="widget-content">
			<table class="table table-striped table-bordered table-highlight" width="100%">
				<thead>
				<tr>
					<th width="15%" align="center">Codigo</th>
					<th width="80%" align="center">Nombre</th>
					<th width="5%" align="center">Elegir</th>
				</tr>
				</thead>
				<tbody>
				{% for concepto in Conceptos %}
					<tr class="{% cycle '' 'odd' %}">
						<td align="right"><label>{{ concepto.codigo }}</label></td>
						<td align="left"><label>{{ concepto.nombre }}</label></td>
						<td><a href="#" id="con_{{ concepto.id }}" data-toggle="modal" onclick="elegirConcepto('{{ concepto.id }}', '{{ concepto.codigo }}', '{{ concepto.nombre }}');" class="acc_concepto"><img src="{{ path }}images/24x24/accept.png" /></a></td>
					</tr>
				{% endfor %}
				</tbody>
			</table>
		</div> <!-- /. widget-content -->
	</div> <!-- /. widget-table -->
</div>


<div class="modal fade hide" id="myEstudiante">
	<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal">&times;</button>
			<h3>Estudiantes</h3>
	</div>
	<div class="widget widget-table">   
		<div class="widget-content">
			<table class="table table-striped table-bordered table-highlight" width="100%">
				<thead>
				<tr>
					<th width="35%" align="center">Identificación</th>
					<th width="60%" align="center">Nombre</th>
					<th width="5%" align="center">Elegir</th>
				</tr>
				</thead>
				<tbody>
				{% for estudiante in Estudiantes %}
					<tr class="{% cycle '' 'odd' %}">
						<td align="right"><label>{{ estudiante.identificacion }}</label></td>
						<td align="left"><label>{{ estudiante.nombre1 }} {{ estudiante.nombre2 }} {{ estudiante.apellido1 }} {{ estudiante.apellido2 }}</label></td>
						<td><a href="#" id="est_{{ estudiante.id }}" data-toggle="modal" onclick="elegirEstudiante('{{ estudiante.id }}', '{{ estudiante.identificacion }}', '{{ estudiante.nombre1 }} {{ estudiante.nombre2 }} {{ estudiante.apellido1 }} {{ estudiante.apellido2 }}');" class="acc_estudiante"><img src="{{ path }}images/24x24/accept.png" /></a></td>
					</tr>
				{% endfor %}
				</tbody>
			</table>
		</div> <!-- /. widget-content -->
	</div> <!-- /. widget-table -->
</div>
{% endblock %}